<template>
  <div class="head-nav">
  <!--图标-->
    <div class="head-logo" @click="goHomePage">
      <div class="item-logo-hd">
        <img src="../../static/img/c.png">
        <span>-Music</span>
      </div>
    </div>
    <!--选项栏-->
    <div class="tab_menu">
      <v-tabs slider-color="blue">
        <v-tab
          v-for="n in navMsg"
          :key="n.type"
          @click="goPage(n.type, n.name)"
        >
          <span>{{ n.name }}</span>
        </v-tab>
      </v-tabs>
    </div>
    <!--搜索框-->
    <div class="head-search">
      <input type="text" placeholder="搜索音乐" @keyup.enter="goSearch()" v-model="keywords">
      <div class="search-btn"  @click.prevent="goSearch()" >
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-sousuo"></use>
        </svg>
      </div>
    </div>
    <!--登录注册-->
    <div class="loginDiv">
      <div v-if="!loginIn">
        <v-tabs slider-color="white">
          <v-tab
            v-for="n in loginMsg"
            :key="n.type"
            @click="goPage(n.type, n.name)"
          >
            <span>{{ n.name }}</span>
          </v-tab>
        </v-tabs>
      </div>
      <div v-if="loginIn">
        <div class="avatorDiv">
        <v-menu
          bottom
          origin="center center"
          transition="scale-transition"
        >
          <template v-slot:activator="{ on }">
            <v-label
              v-on="on"
            >
              <!--头像-->
              <div>
                <v-avatar>
                  <v-img
                    :src="avator"
                    aspect-ratio="1"
                    class="grey lighten-2"
                  >
                    <template v-slot:placeholder>
                      <v-layout
                        fill-height
                        align-center
                        justify-center
                        ma-0
                      >
                        <v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
                      </v-layout>
                    </template>
                  </v-img>
                </v-avatar>
              </div>
            </v-label>
          </template>
          <v-card>
              <v-list>
                <v-list-tile avatar>
                  <v-list-tile-avatar>
                    <v-avatar>
                      <v-img
                        :src="avator"
                        aspect-ratio="1"
                        class="grey lighten-2"
                      >
                        <template v-slot:placeholder>
                          <v-layout
                            fill-height
                            align-center
                            justify-center
                            ma-0
                          >
                            <v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
                          </v-layout>
                        </template>
                      </v-img>
                    </v-avatar>
                  </v-list-tile-avatar>

                  <v-list-tile-content>
                    <v-list-tile-title>
                      {{username}}
                      <svg-icon icon-class="hg" size="20"></svg-icon>
                    </v-list-tile-title>
                    <v-list-tile-sub-title>
                      <span class="subIntroducr">
                        {{mySignature}}
                      </span>
                    </v-list-tile-sub-title>
                  </v-list-tile-content>
                </v-list-tile>
              </v-list>
              <v-divider></v-divider>
              <v-list>
                <v-list-tile @click="goPage(7,'我的')">
                  <v-list-tile-title>
                    <svg-icon icon-class="home"></svg-icon>
                    我的主页
                  </v-list-tile-title>
                </v-list-tile>
                <v-list-tile @click="isShowUpLoad">
                  <v-list-tile-title>
                    <svg-icon icon-class="shangchuan"></svg-icon>
                    上传歌曲
                  </v-list-tile-title>
                </v-list-tile>
                <v-list-tile @click="logout">
                  <v-list-tile-title>
                    <svg-icon icon-class="tuichu"></svg-icon>
                    退出
                  </v-list-tile-title>
                </v-list-tile>
              </v-list>
          </v-card>
        </v-menu>
        </div>
      </div>
    </div>

    <upload-song @changShow="changShow" :show="showUploadPage" :userId="u_id"/>
  </div>
</template>

<script>
import {mixin} from '../mixins'
import { mapGetters } from 'vuex'
import UploadSong from './upload/UploadSong'
export default {
  name: 'head-nav',
  data () {
    return {
      music_name: 'LC-music',
      navMsg: [{
        name: '首页',
        type: 1
      }, {
        name: '歌单',
        type: 2
      }, {
        name: '歌手',
        type: 3
      },{
        name: '排行榜',
        type: 4
      }],
      loginMsg: [{
        name: '登录',
        type: 5
      }, {
        name: '注册',
        type: 6
      }],
      keywords: '',
      menu: false,
      message: false,
      showUploadPage:false,
      u_id:""
    }
  },
  computed: {
    ...mapGetters([
      'userId',
      'activeName',
      'avator',
      'username',
      'loginIn',
      'mySignature',
      'searchword'
    ])
  },
  mixins: [mixin],
  methods: {
    changShow() {
      this.showUploadPage = false

    },
    handleMyPage(type) {
      if (type ===1)  {
        this.$router.push({path: '/my-song'}).catch(error=>{console.log(error)})
      } else if (type ===2) {

      }else if (type ===3)  {
        this.logout()
      }
    },
    goPage (type, value) {
      this.changeIndex(value)
      if (type === 1) {
        this.$router.push({path: '/home-page'})
      } else if (type === 2) {
        this.$router.push({path: '/song-list-page'})
      } else if (type === 3) {
        this.$router.push({path: '/singer-page'})
      } else if (type === 4) {
        // if (this.loginIn) {
        //   document.querySelector('.menu').classList.remove('show')
        //   this.$router.push({path: '/my-song'})
        // } else {
        //   this.$notify({
        //     title: '请先登录',
        //     type: 'warning'
        //   })
        // }
        this.$router.push({path: '/rank-page'})
      } else if (type === 5) {
        this.$router.push({path: '/login-page'})
      } else if (type === 6) {
        this.$router.push({path: '/register-page'})
      } else if (type ===7) {
        this.$router.push({path: '/my-song'})
      }
    },
    changeIndex (value) {
      this.$store.commit('setActiveName', value)
      window.sessionStorage.setItem('activeName', JSON.stringify(value))
    },
    goHomePage () {
      this.getSongLists()
      this.$router.push({path: '/home-page'})
    },
    goMySong () {
      if (this.loginIn) {
        document.querySelector('.menu').classList.remove('show')
        this.$router.push({path: '/my-song'})
      } else {
        this.$notify({
          title: '请先登录',
          type: 'warning'
        })
      }
    },
    goRegister () {
      this.changeIndex('我的')
      this.$router.push({path: '/register-page'})
    },
    goPersonal () {
      document.querySelector('.menu').classList.remove('show')
      this.$router.push({path: '/personal'})
    },
    goUploadImg () {
      document.querySelector('.menu').classList.remove('show')
      this.$router.push({path: '/upLoad-img'})
    },
    goSign () {
      this.$store.commit('setLoginIn', false)
      window.sessionStorage.setItem('loginIn', JSON.stringify(false))
      document.querySelector('.menu').classList.remove('show')
      this.$router.go(0)
    },
    goSearch () {
      this.$store.commit('setSearchword', this.keywords)
      // 在路由跳转的时候传参
      this.$router.push({path: 'search-page', query: {keywords: this.keywords}})
    },
    isShowUpLoad() {
      this.showUploadPage = true
      this.u_id = this.userId + ""
    }
  },
  components: {
    UploadSong,
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  /*.avatorDiv .sp_name{*/
  /*  color: red;*/
  /*  display: inline-block;*/
  /*  margin-left: 5px;*/
  /*  font-size: 1.5em;*/

  /*}*/
  .subIntroducr {
    overflow: hidden;/*超出部分隐藏*/
    text-overflow:ellipsis;/* 超出部分显示省略号 */
    white-space: nowrap;/*规定段落中的文本不进行换行 */
    display: inline-block;
    width: 140px;
  }
  .loginDiv{
    width: 15%;
    position: absolute;
    right: 10px;
    top: 20px;
  }
  .loginDiv span {
    min-width: 60px;
    font-size: 20px;
    text-align: center;
    color: #67757f;
    border-bottom: none;
    cursor: pointer;
  }
  .tab_menu{
    margin-left: 320px;
    margin-top: 20px;
    width: 30%;
    float: left;
  }
.item-logo-hd img{
  width: 45px;
  height: 45px;

}
.item-logo-hd span{
  margin-top: 20px;
  position: absolute;
  display: inline-block;
}
.item-logo-hd .icon {
  width: 50px;
  height: 50px;
  fill: currentColor;
  color: black;
}
.head-nav {
  background-color: #fefefe;
  width: 100%;
  height: 80px;
  position: relative;
  box-shadow: 0 0 10px  black;
}
.head-logo {
  width: 25%;
  font-size: 28px;
  font-weight: bold;
  display: inline-block;
  cursor: pointer;
  position: absolute;
  margin: 0;
  padding: 0;
}
.head-logo img {
  margin-top: 15px;
  margin-left: 130px;
}
/*nav*/

.tab_menu span{
  min-width: 60px;
  font-size: 20px;
  text-align: center;
  color: #67757f;
  border-bottom: none;
  cursor: pointer;
}
/*.navbar li {*/
/*  min-width: 80px;*/
/*  height: 55px;*/
/*  font-size: 20px;*/
/*  text-align: center;*/
/*  color: #67757f;*/
/*  border-bottom: none;*/
/*  cursor: pointer;*/
/*}*/
/*搜索*/
.head-search {
  display: flex;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 25px;
  width: 30%;
}
.head-search input {
  height: 40px;
  width: 75%;
  border: 0;
  text-indent: 10px;
  background-color: #ebeef0;
}
input:focus {
  outline: none;
}
.search-btn{
  background-color: #26a2ff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16%;
  height: 40px;
  cursor: pointer;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.icon{
  width: 0.8em;
  height: 0.8em;
  fill: currentColor;
  color: white;
  font-size: 1.5em;
}

/*!*用户*!*/
/*#user {*/
/*  border-radius: 50%;*/
/*  width: 50px;*/
/*  height: 50px;*/
/*  overflow: hidden;*/
/*  margin: 15px;*/
/*  position: absolute;*/
/*  right: 100px;*/
/*  display: inline-block;*/
/*}*/
/*#user:hover {*/
/*  cursor: pointer;*/
/*}*/
/*#user img {*/
/*  width: 100%;*/
/*}*/
/*.menu {*/
/*  display: none;*/
/*  background-color: #fff;*/
/*  width: 150px;*/
/*  position: absolute;*/
/*  right: 100px;*/
/*  top: 75px;*/
/*  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.4);*/
/*  border: 1px solid rgba(0, 0, 0, 0.5);*/
/*  cursor: pointer;*/
/*  z-index: 100;*/
/*  text-align: center;*/
/*}*/
/*.menu li:hover{*/
/*  background-color: #95d2f6;*/
/*  color: white;*/
/*}*/
/*.menu :nth-child(1):before {*/
/*  content: " ";*/
/*  display: block;!*独占一行*!*/
/*  position: absolute;*/
/*  right:30px;*/
/*  top: -5px; !*果断的露出上半部分*!*/
/*  width: 10px;*/
/*  height: 10px;*/
/*  background-color: #ffffff;*/
/*  border-left: 1px solid rgba(0, 0, 0, 0.4);*/
/*  border-top: 1px solid rgba(0, 0, 0, 0.4);*/
/*  transform: rotate(45deg); !*一个正方形倾斜四十五度就是三角了但是要把下半部分藏起来*!*/
/*}*/
/*.menu :nth-child(1):hover:before{*/
/*  background-color: #95d2f6;*/
/*}*/

/*.menu li {*/
/*  display: inline-block;*/
/*  width: 100%;*/
/*  height: 40px;*/
/*  line-height: 40px;*/
/*  border-bottom: solid 1px rgba(0, 0, 0, 0.2);*/
/*}*/
/*.show {*/
/*  display: block;*/
/*}*/
/*.active{*/
/*  color: #93d2f8 !important;*/
/*  border-bottom: 6px solid #93d2f8 !important;*/
/*}*/
</style>
